<template>
    <view>
        <view class="header">
            <view class="nav">
                <view class="nav-item">
                    <image src="../../../static/images/home_slices/balance/bank-icon.png"></image>
                    <text>银行卡提现</text>
                </view>
                <view class="nav-item">
                    <image src="../../../static/images/home_slices/balance/zhifubao1.png"></image>
                    <text>支付宝提现</text>
                </view>
                <view class="nav-item">
                    <image src="../../../static/images/home_slices/balance/weixin-icon1.png"></image>
                    <text>微信提现</text>
                </view>
            </view>
            <view class="bottom-nav">
                <view class="item">
                    <text>预约提现</text>
                </view>
                <view class="item">
                    <text>提现记录</text>
                </view>
                <view class="item">
                    <text>使用帮助</text>
                </view>
            </view>
        </view>
        <view class="middle">
            <view class="title">最近记录</view>
            <view class="item">
                <view class="left">
                    <image src="../../../static/images/home_slices/balance/zhifubao2.png"></image>
                    <text>张三（2）</text>
                </view>
                <view class="grace-iconfont icon-arrow-right c9"></view>
            </view>
            <view class="item">
                <view class="left">
                    <image src="../../../static/images/home_slices/balance/weixin-icon2.png"></image>
                    <text>张三（2）</text>
                </view>
                <view class="grace-iconfont icon-arrow-right c9"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
    @import "../../../styles/global/index";
.header{
    @include size(100%,360upx);
    background: #498BFA;
    padding-top: 28upx;
    .nav{
        display: flex;
        justify-content: space-around;
        margin: 0 28upx;
        height: 240upx;
        border-bottom: 1upx solid #fff;
        .nav-item{
            @include flex-cl;
            image{
                @include size(80upx,65upx);
            }
            text{
                color:#fff;
                padding-top: 20upx;
            }
        }
    }
    .bottom-nav{
        display: flex;
        justify-content: space-around;
        padding: 40upx 0;
        .item{
            width: 33.3%;
            height: 42upx;
            line-height: 42upx;
            border-right: 1px solid #fff;
            text-align: center;
            color:#Fff;
            &:nth-child(3){
                border: none;
            }
        }
    }
}
.middle{
    margin-top: 20upx;
    background: #fff;
    .title{
        margin: 0 28upx;
        border-bottom: 1px solid #eee;
        height: 90upx;
        line-height: 90upx;
    }
    .item{
        @include flex-bw;
        height: 126upx;
        margin: 0 28upx;
        &:nth-child(2){
            border-bottom: 1px solid #eee;
        }
        .left{
            display: flex;
            align-items: center;
            image{
                @include size(72upx,72upx);
            }
            text{
                padding-left:26upx;
            }
        }
        .icon-arrow-right{
            padding-right: 20upx;
            font-size: 40upx;
        }
    }
}

</style>